<!doctype html>
<html>
<head>
<meta charset="utf-8">
	   
<title>Kyle的个人简历</title>
	<style>
		img{width:100%;}
		body{background:url(img/background.png);background-repeat:repeat;}
	
		.leftbox{width:30%;height: 800px; background:white;margin-left: 1%;margin-top: 1%;float: left;border: 2px solid #DADADA;border-radius:1%;}
		.rightbox{width:65%;height:700px;background:white;margin-left: 2.5%;margin-top: 1%;float:left;border: 2px solid #DADADA;border-radius:0.5%;}
		
		.hand{width:40%;margin: 0 auto;padding-top: 5%;}
			
		.fontleft{font-size: 1rem;font-weight: 700;margin:0 auto;margin-top: 5%;width:15%;}   
		.fontleft2{font-size: 1rem;font-weight: 700;margin:0 auto;margin-top: 5%;width:29%;} 
		
		.leftsvg{margin-left: 1%;display: inline-block;}
		.fontleft3{display: inline-block;font-weight: 700;}
		.fontleft3{display: inline-block;font-weight: 700;}

		.box1{margin-top: 10%;margin-left: 4%;}
				.box2{margin-top: 1%;}
		.box3{margin-top:3%;}
		
		
		.rightsvg{margin-left:1%;display: inline-block;}
		.fontright{display: inline-block;font-weight:700;}
		.xianzhi1{}
		.xianzhi2{}
		.xianzhi3{}
		.box4{width:25%;height:20px;background:white;display: inline-block;animation:html 2s infinite;}
				.box5{width:25%;height:20px;background:white;display: inline-block;animation:English 4s infinite;}
				.box6{width:25%;height:20px;background:white;display: inline-block;animation:ps 3s infinite;}

		li{display: inline-block;}
		ul{display: inline-block;}
		p{padding-left: 5%;}
		
@keyframes html{
	0%{background:#45BBB6;width: 7%;}
	
	100%{background:#45BBB6;width:10%}
		}
		
		@keyframes English{
	0%{background:#45BBB6;width: 30%;}
	
	100%{background:#45BBB6;width:45%}
		}
		
		@keyframes ps{
	0%{background:#45BBB6;width: 22%;}
	
	100%{background:#45BBB6;width:30%}
		}
		
		
		
		
		@media screen and (max-width:1130px){
				.fontleft{font-size: 14px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 15%;}  
			.fontleft2{font-size: 14px;font-weight: 700;margin:0 auto;margin-top: 5%;width:35%;}  
			.fontleft3{font-size: 14px;font-weight: 700;margin:0 auto;margin-top: 5%;}
			li{font-size: 14px;}
			p{font-size: 14px;}
				@media screen and (max-width:960px){
				.fontleft{font-size: 13px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 20%;}  
						.fontleft2{font-size: 13px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 40%;} 
					.fontleft3{font-size: 13px;font-weight: 700;margin:0 auto;margin-top: 5%;}
					li{font-size: 11px;}
								p{font-size: 11px;}

					@media screen and (max-width:690px){
						
				.fontleft{font-size: 12px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 25%;} 
							.fontleft2{font-size: 12px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 45%;} 
						.fontleft3{font-size: 12px;font-weight: 700;margin:0 auto;margin-top: 5%;}
						li{font-size: 10px;}
									p{font-size: 10px;}

						@media screen and (max-width:650px){
						.leftbox{width:93%;height: 740px; background:#DADADA;margin-left: 3%;margin-top: 1%;float: left;border: 2px solid #DADADA;border-radius:1%;}
							
						.fontleft{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 15%;} 
							.fontleft2{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 25%;} 
							.fontleft3{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;}
							li{font-size: 16px;}
										p{font-size: 16px;}

						.rightbox{width:93%;height:700px;background:#DADADA;margin-left: 2.5%;margin-top: 2%;float:left;border: 2px solid #DADADAe;border-radius:0.5%;}
							
							
							@media screen and (max-width:620px){
									.leftbox{width:93%;height: 720px; background:#DADADA;margin-left: 3%;margin-top: 1%;float: left;border: 2px solid #DADADA;border-radius:1%;}
								
								
							@media screen and (max-width:500px){
						.leftbox{width:93%;height: 630px; background:#DADADA;margin-left: 3%;margin-top: 1%;float: left;border: 2px solid #DADADA;border-radius:1%;}
							
							@media screen and (max-width:420px){
								.fontleft{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 20%;} 
	   .fontleft2{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 38%;} 
			.fontleft3{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;}
								li{font-size: 16px;}
											p{font-size: 16px;}

					}				
	
		
							
							
	</style>
</head>
<body>
	<div class="leftbox">
 <div class="hand"><img src="img/lyh.jpg" alt="hand"></div>
	<div class="fontleft">李颖豪</div>
		<div  class="fontleft2">在校大学生/广州</div>
		<div class="box1">
		<div class="leftsvg"><img src="img/jbxx.svg" alt="jbxx"  ></div>
		<div class="fontleft3">基本信息:</div></div>
		<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#26B2F0 SIZE=2>
		  <ul>
                    <li>
                        <label>个人信息</label>
                        <span>李颖豪 / 男 / 18岁</span>
                    </li>
                    <li>
                        <label>学校</label>
                        <span>中山大学南方学院</span>
                    </li>
                    <li>
                        <label>专业</label>
                        <span>数字媒体技术</span>
                    </li>
                </ul>
		<div class="box1">
		<div class="leftsvg"><img src="img/lxfs.svg" alt="lxfs"  ></div>
		<div class="fontleft3">联系方式:</div></div>
		<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#26B2F0 SIZE=2>	
			  <ul>
                    <li>
                        <label>手机</label>
                        <span>18926913500</span>
                    </li>
                    <li>
                        <label>邮箱</label>
                        <span>1115203875@qq.com</span>
                    </li>
                    <li>
                        <label>Github</label>
                        <span>github.com/studentKyle</span>
                    </li>
                </ul>
				<div class="box1">
		<div class="leftsvg"><img src="img/gxjn.svg" alt="jbxx"  ></div>
				<div class="fontleft3">各项技能</div></div>
		<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#26B2F0 SIZE=2>
			<ul>
                    <li>
                        <label>PS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <progress value="50" max="100"></progress>
                    </li>
                    <li>
                        <label>PR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <progress value="20" max="100"></progress>
                    </li>
                    <li>
                        <label>AI&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <progress value="40" max="100"></progress>
                    </li>
                    <li>
                        <label>HTML</label>
                        <progress value="45" max="100"></progress>
                    </li>
                  
                    <li>
                        <label>摄录&nbsp;&nbsp;&nbsp;</label>
                        <progress value="50" max="100"></progress>
                    </li>
                </ul>		
	</div>
	<div class="rightbox">
			<div class="box3">
				<div class="box1">
		<div class="rightsvg"><img src= "img/jy.svg" alt="jy"></div>
					<div class="fontright">教育经历：</div>	</div>
				
	  <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#26B2F0 SIZE=1>
		
		  <div class="xianzhi4">
		 <p>•井岸镇第一小学（小学）<font style="padding-left: 60%">2016.9-2012.6</font></p>
				  <p>•斗门区第四中学（初中）<font style="padding-left: 60%">2012.9-2015.6</font></p>
				  <p>•和风中学（高中）<font style="padding-left: 65%">2015.9-2018.6</font></p>
			  <p>•中山大学南方学院（大学）<font style="padding-left: 58%">2018.9-今</font></p>
			  
			   </div>
					
			
			
			
			
			
			
			
			</div>
		
		
			
			</div>
	
</body>
</html>

